<script setup lang="ts">
import { useCounterStore } from "@/stores/counter";
import { defineProps } from "vue";

// 定义 props（无需注册组件）
const props = defineProps({
  item: {
    type: Object,
    required: true,
    default: () => ({}),
  },
});
//菜单数组回调
const selectMenu = useCounterStore().selectMenu;
//点击菜单时触发
const clickMenu = (item: any) => {
  if (item.type !== 0) {
    //添加菜单面包屑
    selectMenu(item);
  }
};
</script>
<!-- MenuItem.vue（递归组件） -->
<template>
  <!-- 当前菜单项有子菜单时 -->
  <el-sub-menu
    v-if="item.children && item.children.length > 0 && item.isShow == 1"
    :index="item.path == null ? '' : item.path"
    @click="clickMenu(item)"
  >
    <template #title>
      <component style="width: 20px; margin-right: 4px" :is="item.icon" />
      <span>{{ item.name }}</span>
    </template>

    <!-- 关键：递归调用自身 -->
    <MenuCommon v-for="child in item.children" :key="child.id" :item="child" />
  </el-sub-menu>

  <!-- 当前菜单项没有子菜单时 -->
  <el-menu-item v-else-if="item.isShow == 1" :index="item.path" @click="clickMenu(item)">
    <component style="width: 20px; margin-right: 4px" :is="item.icon" />
    <span>{{ item.name }}</span>
  </el-menu-item>
</template>
